<template>
  <div>
    <header class="text-header">
      <router-link :to="{path: 'tLogin' }">
        <img src="./../../assets/pt/jiantou.png" />
      </router-link>
      <h2>接单详情</h2>
    </header>
    <div class="main-container">
      <section class="order-item">
        <div class="order-item-content">
          <div class="order-infor">
            <img src="./../../assets/bpt/1.png" />
            <p>服务项目：<span class="order-item-span">{{orderInfor.project}}</span></p>
          </div>
          <div class="order-infor">
            <img src="./../../assets/bpt/3.png" />
            <p>服务时间：<span class="order-item-span">{{orderInfor.time}}</span></p>
          </div>
          <div class="order-infor">
            <img src="./../../assets/bpt/2.png" />
            <p>服务地址：<span class="order-item-span">{{orderInfor.address}}</span></p>
          </div>
        </div>
      </section>
      <div>
        <router-link :to="{path: 'OrderSuccess'}">
          <button class="verify-order">确认</button>
        </router-link>
      </div>
    </div>	
  </div>	
</template>

<script>
export default {
  data() {
    return {
      allOrderList: [
        { project: '少奶催乳', time: '7:00—10:00', address: '北京市昌平区上奥中心' },
        { project: '乳房硬块', time: '10:00—13:00', address: '北京市昌平区上奥中心' },
        { project: '乳房护理', time: '13:00—16:00', address: '北京市昌平区上奥中心' },
        { project: '产后开奶', time: '16:00—19:00', address: '北京市海淀区泰山饭店' },
        { project: '乳房护理', time: '19:00—22:00', address: '北京市昌平区上奥中心' }
      ],
      neighborOrderList: [
        { project: '少奶催乳', time: '7:00—10:00', address: '北京市昌平区上奥中心' },
        { project: '少奶催乳', time: '10:00—13:00', address: '北京市昌平区维也纳酒店' },
        { project: '少奶催乳', time: '16:00—19:00', address: '北京市昌平区嘉禾园b座' }
      ],
      orderInfor: {}
    }
  },
  methods: {
    setOrderInfor() {
      const { type, index } = this.$route.query

      this.orderInfor = type === 'all' ? this.allOrderList[index-1] : this.neighborOrderList[index-1]
    }
  },
  watch: {
    '$route':'setOrderInfor'
  },
  
  created() {
    this.setOrderInfor()
  }
}
</script>

<style>
.main-container {
  padding: 0.2rem 0.2rem 1.12rem;
}
.order-item {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.25rem;
  margin-bottom: 0.25rem;
  border-radius: 0.05rem;
  background-color: #fff;
}
.order-item-content {
  flex: 1;
}
.order-infor {
  padding: 0.05rem 0;
}
.order-item img {
  width: 0.3rem;
  height: 0.3rem;
  margin-right: 0.05rem;
}
.order-item p{
  display: inline-block;
  font-size: 0.25rem;
}
.order-item-span{
  color: #43a1ff;
}
.text-header {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 0.28rem;
  background-color: #e87979;
}
.text-header a img {
  position: absolute;
  left: 0.3rem;
	top: 50%;
	transform: translateY(-50%);
  height: 0.32rem;
  width: 0.32rem;
}
.text-header h2 {
  font-size: 0.34rem;
  color: #fff;
  text-align: center;
}
.order-container img {
  width: 2rem;
  height: 2rem;
}
.order-container {
  margin-top: 50%;
  transform: translateY(-20%);
  width: 100%;
  height: 3rem;
  line-height: 0.56rem;
  text-align: center;
  font-size: 0.36rem;
}
.verify-order {
  padding: 0.3rem 0.75rem;
  margin-top: 50%;
  margin-left: 50%;
  transform: translate(-50%, -50%);
  color: #e87979;
  font-size: 0.5rem;
  border-radius: 0.08rem;
  border: 2px solid #e87979;
  background-color: #fff;
}
</style>